<template>
    <el-card style="min-width: 480px; text-align: center; margin: 0 auto;">
        <template #header>
            <div class="card-header">
                <h2>登录</h2>
            </div>
        </template>
        <el-form class="login-form" label-position="left" label-width="80px" ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="handleLogin(ruleFormRef)">登录</el-button>
        </template>
    </el-card>
</template>

<script setup lang='ts'>
import type { User } from '../common/type'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'

import axios from '../common'

const router = useRouter()

interface RuleForm {
    userName: string
    password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    userName: '',
    password: '',
})

const rules = ref<FormRules<RuleForm>>({
    userName: [
        { required: true, message: '用户名不能为空', trigger: 'change' },
        { pattern: /^\w{2,10}$/, message: '用户名格式不正确', trigger: 'change' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'change', },
        { pattern: /^\w{2,10}$/, message: '密码格式不正确', trigger: 'change' },
    ]
})

const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //axios 登录请求
            axios.post("/user/login",  ruleForm.value ).then(response => {
                console.log(response.data)
                if (response.data.code === 200) {
                    ElMessage.success('登录成功')
                    sessionStorage.setItem('token', response.data.data)
                    router.push('/index')
                } else {
                    ElMessage.error(response.data.message)
                }
            }).catch(error => {
                console.error("登录请求失败:", error)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}




// const user = ref<User>({
//     userName: '',
//     password: ''
// })

// const handleLogin = () => {
//     //axios 登录请求
//     axios.get("http://localhost:3000/sys_user", { params: user.value }).then(response => {
//         console.log(response.data)
//         if (response.data.length > 0) {
//             ElMessage.success('登录成功')
//             router.push('/index')
//         } else {
//             ElMessage.error('用户名或密码错误')
//         }
//     }).catch(error => {
//         console.error("登录请求失败:", error)
//     })
// }
</script>
<style scoped></style>
